<template>
	<view>
		<u-navbar title="积分明细" back-icon-color="#000" title-color="#000" :title-bold="true" :immersive="true" :border-bottom="false" :background="{background:scrollTop > headHeight ? 'linear-gradient(142deg, #FFF3E5 0%, #E4C79B 100%)' : 'none'}"></u-navbar>
		<view class="m-head">
			<view class="m-head-top">
				<view class="m-head-btn" @click="to_link('/pages2/shop-rule/shop-rule')">
					<text>规则</text>
				</view>
			</view>
			<view class="m-head-points">
				<text>{{jifen || 0}}</text>
			</view>
			<view class="m-head-text">
				<text>我的积分</text>
			</view>
		</view>
		<view class="m-tab">
			<view class="m-tab-item" :class="{'m-tab-active':tabCurrent == index}" @click="clickTabFun(item)" v-for="(item,index) in tabList" :key="index">
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in list" :key="index">
				<view class="m-item-top">
					<text style="color: #34302D;">订单号：</text>
					<text>{{item.orderId}}</text>
				</view>
				<view class="m-item-content">
					<view class="m-item-image">
						<!-- <image src="../static/points-detail/icon-add.png" mode=""></image> -->
						<image src="../static/points-detail/icon-reduce.png" mode=""></image>
					</view>
					<view class="m-item-main">
						<view class="m-item-main__top">
							<view class="m-item-top__left u-line-1">
								<text>{{item.remark}}</text>
							</view>
							<view class="m-item-top__right">
								<text v-if="item.type == 1">{{item.jifen}}</text>
								<text v-else class="m-item-top__right--reduce">{{item.jifen}}</text>
							</view>
						</view>
						<view class="m-item-main__bottom">
							<text class="m-item-bottom__left">{{item.dtTime}}</text>
							<text class="m-item-bottom__right">剩余：{{item.yue}}</text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view style="padding-top: 100rpx;" v-if="list.length == 0 && loading == 'noMore'">
			<u-empty text="暂无数据"></u-empty> 
		</view>
		<uni-load-more :status="loading" v-else></uni-load-more>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				scrollTop:0,
				headHeight:uni.upx2px(460),
				tabList:[{id:0,title:'全部'},{id:1,title:'获取记录'},{id:2,title:'兑换记录'}],
				tabCurrent:0,
				
				jifen:0,
				
				loading:'loading',
				params:{
					page:1,
					pagenum:10,
					type:0
				},
				list:[],
			}
		},
		computed:{
			// 转换字符数值为真正的数值
			navbarHeight() {
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height + systemInfo.statusBarHeight;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if(this.loading == 'loading' || this.loading == 'noMore') return false;
			this.getListFun()
		},
		onLoad() {
			this.getListFun()
		},
		methods: {
			clickTabFun(item){
				if(item.id == this.tabCurrent) return false;
				this.tabCurrent = item.id
				this.params.page = 1
				this.list = []
				this.getListFun()
			},
			getListFun(){
				let params = this.params
				this.loading = 'loading'
				this.$http.getJson('users_jifenRecord',{...params,type:this.tabCurrent}).then(res=>{
					if(res.code == 1){
						let list = res.data || []
						let len = list.length
						if(len > 0){
							this.list = this.list.concat(list)
						}
						if(len == params.pagenum){
							this.loading = 'more'
							params.page += 1
						}else{
							this.loading = 'noMore'
						}
						this.jifen = res.jifen || 0
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
.m-head{
	position: relative;
	width: 750rpx;
	height: 460rpx;
	background: url("../static/points-detail/bg_my balance.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.m-head-top{
		position: absolute;
		top: 212rpx;
		width: 750rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 24rpx;
		.m-head-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 48rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #906F4C;
			font-size: 24rpx;
			color: #906F4C;
		}
	}
	.m-head-points{
		position: absolute;
		top: 300rpx;
		width: 750rpx;
		text-align: center;
		font-size: 48rpx;
		color: #34302D;
		line-height: 64rpx;
	}
	.m-head-text{
		position: absolute;
		top: 363rpx;
		width: 750rpx;
		text-align: center;
		font-size: 24rpx;
		color: #906F4C;
	}
}

.m-tab{
	display: flex;
	align-items: center;
	width: 750rpx;
	background: #fff;
	height: 100rpx;
	.m-tab-item{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #75706A;
	}
	.m-tab-active{
		font-weight: 600;
		color: #000;
		font-size: 32rpx;
		&::after{
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 56rpx;
			height: 6rpx;
			background: #D3A358;
		}
	}
}

.m-list{
	padding-top: 20rpx;
	.m-item{
		background: #fff;
		padding: 0 25rpx;
		margin-bottom: 20rpx;
		.m-item-top{
			display: flex;
			align-items: center;
			height: 90rpx;
			font-size: 24rpx;
			color: #9B958F;
			border-bottom: 1px solid #EAEAEA;
		}
		.m-item-content{
			display: flex;
			padding: 30rpx 0;
			.m-item-image{
				width: 90rpx;
				height: 90rpx;
				flex-shrink: 0;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.m-item-main{
				flex: 1;
				padding-left: 30rpx;
				.m-item-main__top{
					display: flex;
					align-items: center;
					.m-item-top__left{
						width: 480rpx;
						font-size: 30rpx;
						color: #34302D;
						line-height: 42rpx;
					}
					.m-item-top__right{
						flex: 1;
						text-align: right;
						font-size: 26rpx;
						color: #34302D;
					}
					.m-item-top__right--reduce{
						color: #D3A358;
					}
				}
				.m-item-main__bottom{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 10rpx;
					.m-item-bottom__left{
						font-size: 24rpx;
						color: #9B958F;
					}
					.m-item-bottom__right{
						font-size: 20rpx;
						color: #9B958F;
					}
				}
			}
		}
	}
}
</style>
